<template>
  <div class="wrapper">
    <div class="title">地址选择</div>
    <div class="empty" v-if="addressList.length === 0">暂无地址信息</div>
    <div class="address">
      <div
        class="address__item"
        v-for="address in addressList"
        :key="address._id"
        @click="handleAddressClick(address._id)"
      >
        <p class="address__item__basic">
          {{ address.name }}
          <span class="address__item__phone">{{ address.phone }}</span>
        </p>
        <p class="address__item__address">
          {{ address.city }}{{ address.department }}{{ address.houseNumber }}
        </p>
        <div class="iconfont">&#xe6f8;</div>
      </div>
    </div>
  </div>
</template>

<script>
import Docker from '@/components/Docker.vue';
import { get } from '@/utils/request';
import { ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';

// 地址列表逻辑
const useAddressListEffect = () => {
  const addressList = ref([]);
  const getAddressList = async () => {
    try {
      const result = await get('/api/user/address');
      if (result?.errno === 0 && result?.data) {
        addressList.value = result.data;
      }
    } catch (error) {}
  };
  getAddressList();
  return { addressList, getAddressList };
};

export default {
  name: 'AddressSelect',
  components: { Docker },
  setup() {
    // 热搜词列表
    const { addressList } = useAddressListEffect();
    const router = useRouter();
    const route = useRoute();
    const path = route.query.path;
    const handleAddressClick = (id) => {
      router.push(`${path}?addressId=${id}`);
    };
    return {
      addressList,
      handleAddressClick,
    };
  },
};
</script>

<style lang="scss" scoped>
@import '@/style/viriables.scss';
@import '@/style/mixins.scss';
.wrapper {
  overflow-y: auto;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background: $darkBgColor;
}
.title {
  position: relative;
  @include title;
}
.address {
  margin: 0.16rem 0.18rem 0 0.18rem;
  &__item {
    position: relative;
    box-sizing: border-box;
    padding: 0.18rem 0.63rem 0.18rem 0.16rem;
    margin-bottom: 0.16rem;
    background: $bgColor;
    border-radius: 0.04rem;
    &__basic {
      line-height: 0.2rem;
      margin: 0;
      font-size: 0.14rem;
      color: $light-fontColor;
    }
    &__phone {
      margin-left: 0.66rem;
    }
    &__address {
      line-height: 0.2rem;
      margin: 0.08rem 0 0 0;
      font-size: 0.14rem;
      color: $content-fontcolor;
    }
    .iconfont {
      // transform: rotate(180deg);
      position: absolute;
      right: 0.16rem;
      top: 0.31rem;
      color: $light-fontColor;
      font-size: 0.2rem;
    }
  }
}
.empty {
  @include empty;
}
</style>